<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>负载均衡测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        .result-box {
            padding: 20px;
            background-color: #e9f7ff;
            border-radius: 5px;
            margin-top: 20px;
        }
        .history-item {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        .timestamp {
            float: right;
            color: #888;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1>负载均衡测试</h1>
        <hr>

        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                当前服务实例信息
            </div>
            <div class="card-body">
                <div id="serviceInfo" class="result-box">
                    加载中...
                </div>
            </div>
        </div>

        <div class="d-grid gap-2 mb-4">
            <button id="testButton" class="btn btn-primary btn-lg">测试负载均衡</button>
            <button id="refreshButton" class="btn btn-success btn-lg">刷新页面</button>
            <a href="/" class="btn btn-secondary">返回仪表盘</a>
        </div>

        <div class="card mt-4">
            <div class="card-header bg-info text-white">
                请求历史记录
            </div>
            <div class="card-body">
                <div id="historyList">
                    <p class="text-center text-muted">通过观察不同请求的端口号变化，可以验证负载均衡功能正常工作。Spring Cloud LoadBalancer默认使用轮询策略，依次将请求分发到不同的服务实例。</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 页面加载时获取当前服务信息
            fetchServiceInfo();
            
            // 测试按钮点击事件
            document.getElementById('testButton').addEventListener('click', function() {
                fetchLoadBalancerInfo();
            });
            
            // 刷新按钮点击事件
            document.getElementById('refreshButton').addEventListener('click', function() {
                window.location.reload();
            });
            
            // 获取当前服务信息
            function fetchServiceInfo() {
                fetch('/api/service-info')
                    .then(response => response.json())
                    .then(data => {
                        // 更新服务信息显示
                        document.getElementById('serviceInfo').innerHTML = 
                            `<h4>当前服务端口: ${data.port}</h4>
                             <p>${data.instance}</p>`;
                        
                        // 添加到历史记录
                        addToHistory(`当前服务端口: ${data.port}, ${data.instance}`);
                    })
                    .catch(error => {
                        document.getElementById('serviceInfo').innerHTML = 
                            `<div class="alert alert-danger">获取服务信息失败: ${error.message}</div>`;
                    });
            }
            
            // 测试负载均衡
            function fetchLoadBalancerInfo() {
                fetch('/api/lb-test')
                    .then(response => response.json())
                    .then(data => {
                        // 更新服务信息显示
                        let html = `<h4>当前服务端口: ${data.currentPort}</h4>
                                   <p>${data.message}</p>`;
                        
                        if (data.loadBalancedPort) {
                            html += `<hr>
                                    <h4>负载均衡请求结果:</h4>
                                    <p>负载均衡到端口: ${data.loadBalancedPort}</p>
                                    <p>${data.loadBalancedInstance}</p>`;
                        }
                        
                        if (data.error) {
                            html += `<div class="alert alert-warning mt-3">${data.error}</div>`;
                        }
                        
                        document.getElementById('serviceInfo').innerHTML = html;
                        
                        // 添加到历史记录
                        let historyMsg = `当前端口: ${data.currentPort}`;
                        if (data.loadBalancedPort) {
                            historyMsg += `, 负载均衡到端口: ${data.loadBalancedPort}`;
                        }
                        addToHistory(historyMsg);
                    })
                    .catch(error => {
                        document.getElementById('serviceInfo').innerHTML = 
                            `<div class="alert alert-danger">测试负载均衡失败: ${error.message}</div>`;
                    });
            }
            
            // 添加到历史记录
            function addToHistory(message) {
                const now = new Date();
                const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
                               now.getMinutes().toString().padStart(2, '0') + ':' +
                               now.getSeconds().toString().padStart(2, '0');
                
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item';
                historyItem.innerHTML = `
                    ${message}
                    <span class="timestamp">${timeStr}</span>
                `;
                
                const historyList = document.getElementById('historyList');
                historyList.insertBefore(historyItem, historyList.firstChild);
            }
        });
    </script>
</body>
</html> 